<template>
	<view class="container">
		<view class="main-content-all">
			<!-- 主要内容区域 -->
			<scroll-view class="main-content" scroll-y="true" :show-scrollbar="false" :scroll-with-animation="true"
				:scroll-into-view="scrollIntoViewId" @scroll="onScroll">
				<!-- 轮播图区域 -->
				<view class="banner-section" id="banner-section">
					<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="10000"
						:duration="500" indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff">
						<swiper-item v-for="(item, index) in bannerList" :key="index" style="box-sizing:border-box;">
							<view class="banner-item">
								<image class="banner-image" :src="item.image" mode="aspectFill"></image>
								<!-- <view class="banner-overlay">
									<text class="banner-title">{{ item.title }}</text>
								</view> -->
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="main-content-box">
					<!-- 功能按钮区域 -->
					<view class="function-section">

						<view class="function-grid">
							<view class="function-item" v-for="(item, index) in functionList" :key="index"
								@click="handleFunction(item)">
								<view class="function-icon-wrapper">
									<!-- 按钮图标 -->
									<image class="icon-image" :src="item.iconPath" mode="aspectFit">
									</image>
								</view>
								<text class="function-text">{{ item.name }}</text>
							</view>
						</view>
					</view>

					<!-- 景点介绍 -->
					<view class="attraction-sectionbox" id="attraction-section">
						<view class="attraction-section">
							<view class="section-header">
								<view class="section-title-wrapper">
									<svg-icon name="mountain" size="40" />
									<text class="section-main-title">热门景点</text>
								</view>
								<text class="section-subtitle">探索自然之美</text>
							</view>
							<view class="attraction-grid" v-if="attractionList.length > 0">
								<view class="attraction-item" v-for="(item, index) in attractionList" :key="index"
									@click="handleAttraction(item)">
									<view class="attraction-image-wrapper">
										<image class="attraction-image" :src="common.defaultImg(item.coverId)"
											mode="aspectFill" @error="handleImageError">
										</image>
										<view class="attraction-badge">热门</view>
									</view>
									<view class="attraction-content">
										<text class="attraction-name">{{ item.name }}</text>
										<text class="attraction-desc">{{ item.introTitle }}</text>
										<view class="attraction-rating">
											<view class="rating-stars">
												<uni-icons
													v-for="(star, starIndex) in getRatingStars(item.score || 3.5)"
													:key="starIndex" :type="star" size="12" color="#FF9500">
												</uni-icons>
											</view>
											<text class="rating-text">{{ item.rating || 3.5 }}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="empty-activity" v-else>
								<text class="empty-text">暂无景点信息</text>
								<text class="empty-desc">景点信息正在准备中，敬请期待...</text>
							</view>
							<view class="more-button" @click="viewMore" v-if="attractionList.length > 4">
								<text class="more-text">查看更多精彩</text>
								<text class="customicons more-icon">&#xe603;</text>
							</view>
						</view>
					</view>


					<!-- 活动预约 -->
					<view class="activity-section" id="activity-section">
						<view class="section-header">
							<view class="section-title-wrapper">
								<svg-icon name="party" size="40" />
								<text class="section-main-title">精彩活动</text>
							</view>
							<text class="section-subtitle">不容错过的体验</text>
						</view>
						<scroll-view class="activity-scroll" scroll-x="true" show-scrollbar="false"
							v-if="activityList.length > 0">
							<view class="activity-list">
								<view class="activity-item" v-for="(item, index) in activityList" :key="index"
									@click="handleActivity(item)">
									<view class="activity-image-wrapper">
										<image class="activity-image" :src="common.defaultImg(item.coverId)"
											mode="aspectFill" @error="handleImageError">
										</image>
										<view class="activity-status" v-if="item.status === 3">火热</view>
										<view class="activity-status inactive" v-else>即将开始</view>
									</view>
									<text class="activity-name">{{ item.title }}</text>
									<view class="activity-info">
										<text class="activity-type">{{ item.type?.name || '活动' }}</text>
										<text class="activity-tags" v-if="item.tags && item.tags.length > 0">
											{{ item.tags[0]?.tag }}
										</text>
									</view>
									<view class="activity-time" v-if="item.startTime">
										<text class="time-text">{{ formatDate(item.startTime) + ' - ' +
											formatDate(item.endTime) }}</text>
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="empty-activity" v-else>
							<text class="empty-text">暂无活动信息</text>
							<text class="empty-desc">精彩活动正在准备中，敬请期待...</text>
						</view>
					</view>

					<!-- 商品展示 -->
					<view class="attraction-sectionbox" id="commodity-section">
						<view class="attraction-section">
							<view class="section-header">
								<view class="section-title-wrapper">
									<svg-icon name="shop" size="40" />
									<text class="section-main-title">热销商品</text>
								</view>
								<text class="section-subtitle">精选好物</text>
							</view>
							<view class="attraction-grid" v-if="commodityList.length > 0">
								<view class="commodity-item" v-for="(item, index) in commodityList.slice(0, 4)"
									:key="index" @click="handleCommodity(item)">
									<view class="commodity-image-wrapper">
										<image class="commodity-image" :src="common.defaultImg(item.commodity_images)"
											mode="aspectFill" @error="handleImageError">
										</image>
										<view class="commodity-badge">{{ item.tag ? item.tag : '推荐' }}</view>
									</view>
									<view class="commodity-content">
										<text class="commodity-name">{{ item.commodity_name }}</text>
										<view class="commodity-type-box">
											<text class="commodity-type" v-if="item.type && item.type.name">{{
												item.type?.name }}</text>
										</view>
										<view class="commodity-price-box">
											<view class="price-group">
												<text class="commodity-price">¥{{
													filterPrice(item.sale_price, item.discount) }}</text>
												<text class="original-price" v-if="item.discount">¥{{ item.sale_price
												}}</text>

											</view>
										</view>
										<view class="commodity-info-box">
											<view class="discount-tag" v-if="item.discount && item.discount != 1">{{ item.discount * 10 }}折
											</view>
											<view class="commodity-sold">已售{{ item.sales_quantity }}件</view>
										</view>

										<view class="promotion-box" v-if="item.promotion">
											<text class="promotion-tag">满减</text>
											<text class="promotion-text">{{ item.promotion }}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="empty-activity" v-else>
								<text class="empty-text">暂无商品信息</text>
								<text class="empty-desc">商品信息正在准备中，敬请期待...</text>
							</view>
							<view class="more-button" @click="viewMoreCommodity" v-if="commodityList.length > 4">
								<text class="more-text">查看更多商品</text>
								<text class="customicons more-icon">&#xe603;</text>
							</view>
						</view>
					</view>

				</view>
				<view style="height: 20rpx;"></view>

			</scroll-view>
			<!-- 返回顶部按钮 -->
			<view class="back-to-top" v-if="showBackToTop" @click="backToTop">
				<uni-icons type="arrow-up" size="26" color="white"></uni-icons>
			</view>
		</view>


		<!-- 自定义底部导航栏 -->
		<bottom-navbar :showPlaceholder="false" :current="0" :isicon="true"></bottom-navbar>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed, nextTick, toRefs } from 'vue';
import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app';
import common from '@/utils/common.js';
import api from '@/api/index.js';

import useUserInfoStore from '@/stores/user';
import { storeToRefs } from 'pinia';
import SvgIcon from '@/components/svg-icon/svg-icon.vue'
import dayjs from 'dayjs';

const userInfoStore = useUserInfoStore();
const { userData } = toRefs(userInfoStore);

const imgUrl = uni.imgUrl;

// 滚动控制
const scrollIntoViewId = ref('');
const currentScrollTop = ref(0);
const showBackToTop = ref(false);

// 轮播图数据
const bannerList = ref([
	{
		image: '/static/images/bn1.jpg',
		title: '探索神秘森林'
	},
	{
		image: '/static/images/bn2.jpg',
		title: '山水如画'
	},
	{
		image: '/static/images/bn3.jpg',
		title: '古韵悠长'
	}
]);

// 功能按钮数据 - 增加渐变色和发光效果
const functionList = ref([
	{
		name: '景区介绍',
		gradient: 'linear-gradient(135deg, #FF6B6B, #FF8E8E)',
		glowColor: 'rgba(254, 206, 21,0.3)',
		action: 'navigate',
		target: 'attraction-section',
		url: '/pages/details/scenicDetail?type=all',
		iconPath: '/static/icons/icon1.svg'
	},
	{
		name: '活动预约',
		gradient: 'linear-gradient(135deg, #4ECDC4, #7EDDD7)',
		glowColor: 'rgba(98, 228, 176, 0.3)',
		action: 'scroll',
		target: 'activity-section',
		iconPath: '/static/icons/icon2.svg'
	},
	{
		name: '交通',
		gradient: 'linear-gradient(135deg, #45B7D1, #74C7E3)',
		glowColor: 'rgba(247, 105, 128, 0.3)',
		action: 'navigate',
		url: '/pages/details/traffic',
		iconPath: '/static/icons/icon3.svg'
	},
	{
		name: '美食',
		gradient: 'linear-gradient(135deg, #FFA726, #FFB74D)',
		glowColor: 'rgba(164, 142, 229, 0.3)',
		action: 'navigate',
		url: '/pages/details/foodList',
		iconPath: '/static/icons/icon4.svg'
	},
	{
		name: '酒店',
		gradient: 'linear-gradient(135deg, #AB47BC, #BA68C8)',
		glowColor: 'rgba(63, 162, 255, 0.3)',
		action: 'navigate',
		url: '/pages/details/hotel',
		iconPath: '/static/icons/icon5.svg'
	}
]);

// 景点介绍数据
const attractionList = ref([]);

// 活动预约数据
const activityList = ref([]);

// 商品展示数据
const commodityList = ref([]);

onLoad(() => { });

onMounted(() => {
	getData();
});

const getData = () => {
	// 获取景区列表
	api.attractionsApi.listSpots({ typeId: 6, page: 1, pageSize: 8 }).then((res) => {
		attractionList.value = res
	}).catch((error) => {
		console.error('获取景区列表失败:', error);
	});

	// 获取活动列表
	api.attractionsApi.listInfos({ page: 1, pageSize: 50, group: 1 }).then((res) => {
		if (res && Array.isArray(res)) {
			// 如果返回的是数组
			activityList.value = res;
		}
	})

	// 获取商品列表
	api.commerceApi.list({ page: 1, pageSize: 10 }).then((res) => {
		if (res && Array.isArray(res.list)) {
			commodityList.value = res.list;
		}
	});
};

// 售价
const filterPrice = (sale_price, discount) => {
	if (discount) {
		return (sale_price * discount).toFixed(2);
	} else {
		return sale_price;
	}
};

// 功能按钮点击
const handleFunction = (item) => {
	if (item.action === 'scroll') {
		// 先清空之前的scroll-into-view，然后设置新的目标
		scrollIntoViewId.value = '';
		// 使用nextTick确保DOM更新后再设置scroll-into-view
		nextTick(() => {
			scrollIntoViewId.value = item.target;
			// 1秒后清空scroll-into-view值，避免重复点击无效
			setTimeout(() => {
				scrollIntoViewId.value = '';
			}, 1000);
		});
	} else if (item.action === 'navigate') {
		// 页面跳转
		uni.navigateTo({
			url: item.url,
		});
	}
};

// scroll-view滚动事件
const onScroll = (e) => {
	currentScrollTop.value = e.detail.scrollTop;
	// 当滚动距离大于500时显示返回顶部按钮
	showBackToTop.value = currentScrollTop.value > 400;
};

// 景点点击
const handleAttraction = (item) => {
	uni.navigateTo({
		url: `/pages/details/scenicDetail?id=${item.id}`
	});
};

// 活动点击
const handleActivity = (item) => {
	uni.navigateTo({
		url: `/pages/details/activity?id=${item.id}`
	});
};

// 商品点击
const handleCommodity = (item) => {
	uni.navigateTo({
		url: `/pages/commerce/detail?id=${item.id}`
	});
};

// 图片加载错误处理
const handleImageError = (event) => {
	console.log('图片加载失败，使用默认图片');
	event.target.src = '/static/images/default-scenic.svg';
};

// 格式化日期
const formatDate = (dateString) => {
	if (!dateString) return '';
	// 使用dayjs解析日期，兼容iOS
	const date = dayjs(dateString);
	if (!date.isValid()) return '';
	const month = date.month() + 1;
	const day = date.date();
	return `${month}月${day}日`;
};

// 查看更多
const viewMore = () => {
	uni.navigateTo({
		url: '/pages/details/scenicList'
	});
};

// 查看更多商品
const viewMoreCommodity = () => {
	uni.navigateTo({
		url: '/pages/commerce/commodity'
	});
};

// 返回顶部
const backToTop = () => {
	// 滚动到顶部区域（轮播图）
	scrollIntoViewId.value = '';
	nextTick(() => {
		scrollIntoViewId.value = 'banner-section';
		// 1秒后清空scroll-into-view值
		setTimeout(() => {
			scrollIntoViewId.value = '';
		}, 1000);
	});
};

// 计算星级显示
const getRatingStars = (rating) => {
	const stars = [];
	const fullStars = Math.floor(rating); // 满星数量
	const hasHalfStar = rating % 1 >= 0.5; // 是否有半星
	const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0); // 空星数量

	// 添加满星
	for (let i = 0; i < fullStars; i++) {
		stars.push('star-filled');
	}

	// 添加半星
	if (hasHalfStar) {
		stars.push('starhalf');
	}

	// 添加空星
	for (let i = 0; i < emptyStars; i++) {
		stars.push('star');
	}

	return stars;
};
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	// background: linear-gradient(180deg, #87CEEB 0%, #98FB98 30%, #90EE90 60%, #FFF8DC 90%, #F0F8FF 100%);
	box-sizing: border-box;
	position: relative;
	overflow: hidden;

	/* H5环境下隐藏滚动条 */
	/* #ifdef H5 */
	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	scrollbar-width: none;
	-ms-overflow-style: none;
	overflow-x: hidden;
	/* #endif */
}


.main-content-all {
	flex: 1;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
}

.main-content {
	height: 100%;
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
	z-index: 1;

	/* H5环境下隐藏滚动条 */
	/* #ifdef H5 */
	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	scrollbar-width: none;
	-ms-overflow-style: none;
	/* #endif */
}

.banner-section {
	position: relative;
	height: 800rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.15);

	.banner-swiper {
		width: 100%;
		height: 100%;

		.banner-item {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;

			.banner-image {
				width: 100%;
				height: 100%;
			}

			.banner-overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				padding: 40rpx 30rpx 30rpx;

				.banner-title {
					color: white;
					font-size: 32rpx;
					font-weight: bold;
					text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
				}
			}
		}
	}
}

.main-content-box {
	position: relative;
	top: -200rpx;
	z-index: 1;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4));
	border-radius: 24rpx 24rpx 0 0;
}

.function-section {
	padding: 35rpx 30rpx 60rpx;
	backdrop-filter: blur(16rpx);

	.section-title-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;

		.section-icon {
			font-size: 32rpx;
			margin-right: 15rpx;
		}

		.section-main-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}

	.function-grid {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		gap: 20rpx;

		.function-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;
			min-width: 110rpx;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
			}

			.function-icon-wrapper {
				position: relative;
				margin-bottom: 15rpx;
				box-sizing: border-box;

				.icon-image {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
					position: relative;
					z-index: 2;
				}

			}

			.function-text {
				font-weight: 500;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
}

.attraction-sectionbox {
	padding: 24rpx 0 0;
	box-sizing: border-box;
}


.attraction-section,
.activity-section {
	background: rgba(255, 255, 255, 0.95);
	margin: 0 20rpx 20rpx;
	border-radius: 24rpx;
	padding: 40rpx 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
	backdrop-filter: blur(20rpx);
	box-sizing: border-box;

	.section-header {
		margin-bottom: 30rpx;
		text-align: center;

		.section-title-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 15rpx;
			margin-bottom: 10rpx;
		}

		.section-subtitle {
			font-size: 24rpx;
			color: #666;
			opacity: 0.8;
		}
	}

	.attraction-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		margin-bottom: 30rpx;

		.attraction-item {
			border-radius: 16rpx;
			overflow: hidden;
			background: white;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
			transition: all 0.3s ease;

			&:active {
				transform: translateY(-4rpx);
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
			}

			.attraction-image-wrapper {
				position: relative;

				.attraction-image {
					width: 100%;
					height: 200rpx;
				}

				.attraction-badge {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
					color: white;
					font-size: 20rpx;
					padding: 4rpx 12rpx;
					border-radius: 12rpx;
					font-weight: bold;
				}
			}

			.attraction-content {
				padding: 20rpx;

				.attraction-name {
					display: block;
					font-size: 28rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 8rpx;
					text-align: center;
				}

				.attraction-desc {
					font-size: 22rpx;
					color: #666;
					line-height: 1.4;
					margin-bottom: 12rpx;
					//限制显示两行
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}

				.attraction-rating {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 8rpx;

					.rating-stars {
						display: flex;
						align-items: center;
						gap: 4rpx;
					}

					.rating-text {
						font-size: 22rpx;
						color: #FF6B6B;
						font-weight: bold;
					}
				}
			}
		}
	}

	.more-button {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10rpx;
		background: linear-gradient(135deg, #56ab2f, #a8e6cf);
		color: white;
		padding: 20rpx 40rpx;
		border-radius: 50rpx;
		box-shadow: 0 4rpx 16rpx rgba(86, 171, 47, 0.3);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 8rpx rgba(86, 171, 47, 0.4);
		}

		.more-text {
			font-size: 28rpx;
			color: white;
			font-weight: 500;
		}

		.more-icon {
			font-size: 24rpx;
			color: white;
		}
	}
}

.activity-section {
	.activity-scroll {
		white-space: nowrap;

		.activity-list {
			display: flex;
			gap: 20rpx;
			padding: 0 10rpx;

			.activity-item {
				flex-shrink: 0;
				width: 240rpx;
				background: white;
				border-radius: 16rpx;
				overflow: hidden;
				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
				transition: all 0.3s ease;
				border: 1rpx solid rgba(0, 0, 0, 0.05);

				&:active {
					transform: translateY(-4rpx);
					box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
				}

				.activity-image-wrapper {
					position: relative;

					.activity-image {
						width: 100%;
						height: 150rpx;
					}

					.activity-status {
						position: absolute;
						top: 8rpx;
						left: 8rpx;
						background: linear-gradient(135deg, #4ECDC4, #7EDDD7);
						color: white;
						font-size: 18rpx;
						padding: 4rpx 10rpx;
						border-radius: 10rpx;
						font-weight: bold;

						&.inactive {
							background: linear-gradient(135deg, #999, #bbb);
						}
					}
				}

				.activity-name {
					font-size: 24rpx;
					color: #333;
					font-weight: 500;
					padding: 15rpx;
					text-align: center;
					line-height: 1.3;
					// 限制显示两行，超出显示省略号
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					max-height: 66rpx; // 保证两行的高度
				}

				.activity-info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 15rpx 10rpx;

					.activity-type {
						font-size: 20rpx;
						color: #4ECDC4;
						font-weight: bold;
						background: rgba(78, 205, 196, 0.1);
						padding: 4rpx 10rpx;
						border-radius: 10rpx;
						border: 1rpx solid rgba(78, 205, 196, 0.2);
					}

					.activity-tags {
						font-size: 18rpx;
						color: #FF6B6B;
						background: rgba(255, 107, 107, 0.1);
						padding: 4rpx 10rpx;
						border-radius: 10rpx;
						border: 1rpx solid rgba(255, 107, 107, 0.2);
						max-width: 120rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.activity-time {
					padding: 0 15rpx 15rpx;

					.time-text {
						font-size: 20rpx;
						color: #999;
					}
				}
			}
		}
	}
}

.empty-activity {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 30rpx;

	.empty-text {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 15rpx;
		font-weight: 500;
	}

	.empty-desc {
		font-size: 24rpx;
		color: #999;
		text-align: center;
		line-height: 1.4;
	}
}

/* 返回顶部按钮 */
.back-to-top {
	position: absolute;
	right: 30rpx;
	bottom: 30rpx;
	width: 80rpx;
	height: 80rpx;
	background: linear-gradient(135deg, #56ab2f, #a8e6cf);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(86, 171, 47, 0.4);
	backdrop-filter: blur(10rpx);
	z-index: 999;
	animation: slideInRight 0.3s ease-out;
	transition: all 0.3s ease;

	&:active {
		transform: scale(0.95);
		box-shadow: 0 4rpx 16rpx rgba(86, 171, 47, 0.6);
	}
}

@keyframes slideInRight {
	from {
		transform: translateX(120rpx);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* H5环境下全局隐藏滚动条 */
/* #ifdef H5 */
:deep(*) {
	&::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

:deep(scroll-view) {
	&::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
	}

	scrollbar-width: none !important;
	-ms-overflow-style: none !important;
}

/* #endif */

.commodity-item {
	border-radius: 16rpx;
	overflow: hidden;
	background: white;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;

	&:active {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
	}

	.commodity-image-wrapper {
		position: relative;

		.commodity-image {
			width: 100%;
			height: 200rpx;
		}

		.commodity-badge {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
			color: white;
			font-size: 20rpx;
			padding: 4rpx 12rpx;
			border-radius: 12rpx;
			font-weight: bold;
		}
	}

	.commodity-content {
		padding: 0rpx 20rpx 20rpx;
		box-sizing: border-box;

		.commodity-name {
			display: block;
			font-size: 28rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
			//限制显示一行
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.commodity-type-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.commodity-type {
			font-size: 22rpx;
			color: #666;
			padding: 4rpx 12rpx;
			background: rgba(102, 102, 102, 0.1);
			border-radius: 8rpx;
			margin-bottom: 12rpx;
			display: inline-block;
		}


		.commodity-price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price-group {
				display: flex;
				align-items: center;
				gap: 8rpx;

				.commodity-price {
					font-size: 32rpx;
					color: #FF6B6B;
					font-weight: bold;
				}

				.original-price {
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
				}


			}
		}

		.commodity-info-box {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.discount-tag {
				font-size: 20rpx;
				color: #FF6B6B;
				background: rgba(255, 107, 107, 0.1);
				padding: 2rpx 8rpx;
				border-radius: 6rpx;
			}

			.commodity-sold {
				font-size: 22rpx;
				color: #999;
			}
		}


		.promotion-box {
			margin-top: 8rpx;
			display: flex;
			align-items: center;
			gap: 8rpx;

			.promotion-tag {
				font-size: 20rpx;
				color: #FF6B6B;
				background: rgba(255, 107, 107, 0.1);
				padding: 2rpx 8rpx;
				border-radius: 6rpx;
			}

			.promotion-text {
				font-size: 20rpx;
				color: #666;
			}
		}
	}
}
</style>
